<template>
    <div class="user-avatar">
        <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle class="progress-background" r="42" cx="50" cy="50" fill="#fff"></circle>
            <circle :stroke-dashoffset="dashOffset" :stroke-dasharray="dashArray" class="progress-bar" r="42" cx="50"
                    cy="50" fill="transparent"></circle>
        </svg>
        <div class="avatar-wrap">
            <img class="avatar" src="../assets/avator.jpg" alt="">
            <div class="level">Lv.{{level}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserAvatar",
        props: {
            level: {
                type: Number,
                default: 0
            },
            totalLevel: {
                type: Number,
                default: 5
            },
        },
        data() {
            return {
                radius: 100,
                dashArray: Math.PI * 96,
            }
        },
        computed: {
            dashOffset() {
                return (1 - this.level / this.totalLevel) * this.dashArray;
            }
        },
    }
</script>

<style scoped lang="less">
    .user-avatar {
        position: relative;

        .level {
            width: 100%;
            height: 0.4rem;
            background-color: #483380;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            line-height: 0.35rem;
            color: #FFFFFF;
        }

        .avatar-wrap {
            background-color: #fff;
            position: absolute;
            left: 13px;
            top: 13px;
            height: 74px;
            width: 74px;
            overflow: hidden;
            border-radius: 50%;
        }

        circle {
            stroke-width: 8px;
            transform-origin: center;

            &.progress-background {
                stroke: #FFFFFF;
                background-color: #fff;
            }

            &.progress-bar {
                stroke-width: 4px;
                stroke: #f2b937;
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                stroke-linecap: round;
            }
        }
    }
</style>
